<template>
  <view class="text-tip">
    <i :style="{right}" />
    {{content}}
  </view>
</template>
<script>
  export default {
    props: {
      content: {
        type: String,
        default: ''
      },
      right: {
        type: String,
        default: '96rpx'
      }
    }
  };
</script>
<style lang="scss" scoped>
  .text-tip {
    position: absolute;
    background-color: #FF4D4F;
    color: #ffffff;
    padding: 10rpx 20rpx;
    right: 0;
    bottom: 60rpx;
    z-index: 9999;
    border-radius: 8rpx;

    i {
      display: block;
      content: '';
      position: absolute;
      bottom: -10rpx;
      width: 0rpx;
      height: 0rpx;
      bottom: -24rpx;
      border: 10rpx solid transparent;
      border-top: 18rpx solid #FF4D4F;
    }
  }
</style>